<template>
	<view class="withdraw">
		<view class="withdraw-head">
			<view class="withdraw-head-to">到账渠道</view>
			<view class="withdraw-head-way">
				<view class="withdraw-head-way-1">
					<image class="way-icon" src="https://videocun.oss-cn-beijing.aliyuncs.com/65695202202131438142060.png"></image>
					<text class="way-text">余额</text>
				</view>
			</view>
		</view>
		<view class="withdraw-body">
			<text>可兑换积分：{{userInfo.integral}}</text>
			<view class="input-money">
				<input v-model.number="extract" type="text"  class="t-input" />
			</view>
			<view class="info-money">
				
				<view >
					<text class="info-money-num" style="color: #ff1e0f;">1积分 = {{ userInfo.integral_ratio }}余额</text>
				</view>
				<view >
					<text class="info-money-num">当前可兑换余额{{ pool }}元，</text>
					<text class="info-money-all" @click="getAll">全部兑换</text>
				</view>
			</view>
			<view :class="'tx' + (is_post ? '-active' : '')"><button @click="handleShowModel">兑换</button></view>
		</view>

		

		
	</view>
</template>

<script>

import {
		getUserInfo
	} from '@/api/user.js';
import {
		changeBlance
	} from '@/api/activity.js';
    
export default {
	data() {
		return {
			extract: '',
			userInfo: {}
		};
	},
	watch: {
		extract(oldVal, newVal) {}
	},
	onLoad() {
		this.getUserInfo(); 
	},
    computed: {
        pool() {
            if (this.userInfo.integral) {
                return this.userInfo.integral * this.userInfo.integral_ratio
            }
            
            return 0
        }
    },
	methods: {
        getAll() {
            this.extract = this.userInfo.integral
        },
        getUserInfo: function() {
            let that = this;
            uni.showLoading({})
            getUserInfo().then(res => {
                uni.hideLoading()
                that.userInfo = res.data
            })
		},
		async handleShowModel() {
            if (this.extract <= 0 || typeof this.extract !== 'number') {
                uni.showToast({
                    title: '请核对积分数量!',
                    duration: 2000
                });
                return false
            }
			if (this.extract > this.userInfo.integral) {
				uni.showToast({
                    title: '积分不足!',
                    duration: 2000
                });
                return false
			}	
            uni.showLoading({ title: "兑换中……" });
			changeBlance({integral: this.extract}).then(res => {
				 uni.hideLoading()
				if (res.status == 200) {
					uni.navigateBack();
				} else {
					uni.showToast(res.msg)
				}
               
                
            })
		},
		
	}
};
</script>

<style lang="scss" scoped>
@import './icon.css';
@import './main.css';
page {
	background-color: #ededed;
}
.withdraw {
	padding: 20px;
	&-head {
		background-color: #f7f7f7;
		display: flex;
		align-content: center;
		padding: 20px 30px;
		font-size: 14px;
		&-to {
		}
		&-way {
			display: flex;
			flex-direction: column;
			align-content: center;
			margin-left: 20px;
			&-1 {
				color: #576b95;
				margin-bottom: 10px;
				.way-icon {
					width: 16px;
					height: 16px;
					margin-right: 5px;
					top: 2px;
				}
			}
			&-2 {
				color: #acacac;
				font-size: 12px;
			}
		}
	}
	&-body {
		background-color: #fff;
		padding: 20px 30px;
		font-size: 14px;
		.input-money {
			display: flex;
			align-content: center;
			font-weight: 600;
			border-bottom: 0.5px solid #eaeef1;
			.rmb {
				font-size: 2em;
				top: 10px;
				position: relative;
			}
			.t-input {
				height: 1.9em;
				font-size: 2.5em;
				border: none;
				position: relative;
				left: 3.5%;
				outline: none;
			}
		}
		.info-money {
			margin-top: 10px;
			font-size: 12px;
			margin-bottom: 20px;
			&-num {
				color: #b2b2b2;
			}
			&-all {
				color: #576b95;
			}
		}
		.tx {
			button {
				color: #c3a575;
			}
		}
		.tx-active {
			button {
				color: #fff;
				background: #07c160;
			}
		}
	}
	.keyboard {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ebebeb;
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		transition: all 0.2s ease-in 0.2s;
	}
	.active {
		bottom: -400rpx;
	}
	.keyboard-item {
		box-sizing: border-box;
		width: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 40rpx;
		color: #333;
		height: 99rpx;
		border: 1rpx solid #ebebeb;
		border-top: none;
		border-left: none;
	}
	.hide {
		opacity: 0;
	}
	.delte {
		background: none;
		box-shadow: none;
	}
	.delte image {
		width: 60rpx;
		height: 60rpx;
	}
	.isIphone {
		padding-bottom: 68rpx !important;
	}
	.fee {
		em {
			font-size: 0.5rem;
			font-style: normal;
		}
	}
}
</style>
